<script lang="tsx" setup>
import { computed } from 'vue';

const visible = defineModel('visible', { type: Boolean, default: false });

interface Props {
  url: string;
  title?: string;
  height?: string;
  width?: string;
  type?: string | null;
  pdfUseIframe?: boolean;
}

const props = withDefaults(defineProps<Props>(), {
  title: '文件预览',
  height: '80vh',
  width: '1200px',
  type: null,
  pdfUseIframe: false
});

const imgType = ['jpg', 'jpeg', 'png', 'gif', 'bmp', 'webp'];

const fileType = computed(() => {
  if (props.type) return props.type?.toLowerCase();
  return props.url.split('.').pop()?.toLowerCase();
});
</script>

<template>
  <Modal
    v-model:visible="visible"
    :title="title"
    :height="height"
    :width="width"
    destroy-on-close
    :show-confirm-btn="false"
    cancel-btn-text="关闭"
    :modal-warp-style="{ padding: '0' }"
  >
    <template v-if="fileType === 'pdf'">
      <PdfViewer :url="url" :use-iframe="pdfUseIframe" />
    </template>
    <template v-else-if="imgType.includes(fileType)">
      <img :src="url" alt="" class="h-full w-full" />
    </template>
  </Modal>
</template>

<style lang="scss" scoped></style>
